<template>
  <FullPage class="home" header-style="padding:0;" body-style="padding:0;">
    <template #header>
      <Head isBg :fixed="false" type="level_2" name="分类" />
    </template>

    <!-- 骨架 -->
    <Skeletons v-if="login" />

    <view v-else class="list2">
      <view style="margin: 0 20px">
        <uv-swiper
          class="swiper"
          indicatorActiveColor="#FF4949"
          indicator
          circular
          indicatorMode="dot"
          radius="15px"
          keyName="banner_url"
          :list="bannerList"
          @click="onBannerClick"
        ></uv-swiper>
      </view>
      <view class="shopList">
        <!-- 分类 -->
        <Classify class="classify" @onClassify="onClassify" />
        <!-- end -->
        <view class="classify-item">
          <uv-empty
            marginTop="25vh"
            class="empty"
            v-if="!productList.length"
            mode="data"
            text="暂无数据"
            icon="https://lehuopai-1311286543.cos.ap-guangzhou.myqcloud.com/img/my/icon_empty.png"
            width="80"
            height="80"
            textColor="#999999"
          ></uv-empty>
          <scroll-view
            v-else
            class="scroll-view"
            :scroll-with-animation="true"
            :scroll-top="scrollTop"
            @scrolltolower="onReachBottom"
            scroll-y="true"
            :show-scrollbar="false"
          >
            <ShopCard
              v-for="(item, index) in productList"
              :key="index"
              :item="item"
              :height="image_height"
            />
          </scroll-view>
        </view>
      </view>
    </view>
  </FullPage>
</template>
<script>
import { pxtoRpx } from "@/utils/shopUtils/index";
import ShopCard from "../components/shopCard.vue";
import Head from "@/components/Head/head.vue";
import Skeletons from "@/components/Skeletons/skeletons.vue";
import { shopApiProductList, shopApiBanner } from "@/api/shopApi/index";
import FullPage from "@/components/Layout/FullPage.vue";
import Classify from "../components/classify.vue";
import useOrder from "@/store/order";
const { order } = useOrder();
export default {
  components: {
    ShopCard,
    Head,
    Skeletons,
    FullPage,
    Classify,
  },
  data() {
    return {
      productList: [],
      c_width: uni.getSystemInfoSync().windowWidth,
      c_height: uni.getSystemInfoSync().windowHeight,
      image_height: 0,
      back_to_top: false,
      scrollTop: 0,
      page: 1,
      per_page: 20,
      total: 0,
      login: false,
      bannerList: [],
    };
  },

  onLoad() {
    var w = pxtoRpx(this.c_width);
    this.image_height = parseInt(w * 0.44);
    this.login = true;
    this.initList();
    this.initBanner();
  },
  methods: {
    onBannerClick(e) {
      const id = this.bannerList[e]?.uuid;
      uni.navigateTo({
        url: "/pages/shop/index/goods_info?id=" + id,
      });
    },
    // 分类选中
    onClassify(id) {
      order.actionId = id;
      this.initList();
    },
    //end
    async initBanner() {
      const param = {
        type: 1,
      };
      const { data } = await shopApiBanner(param);
      if (data.error_code === 0) {
        data.data.forEach((item) => {
          if (item.pos === 1) {
            this.bannerList.push(item);
          }
        });
      }
    },
    onReachBottom() {
      if (this.total <= this.productList.length) {
        //总条数等于当前返回条数
        // uni.showToast({
        //   title: "没有更多内容了~",
        //   icon: "none",
        // });
      } else {
        // uni.showToast({
        //   title: "加载中...",
        //   icon: "none",
        // });
        this.page = this.page + 1;
        this.initList("next");
      }
    },

    // 获取商品列表
    async initList(type) {
      const param = {
        per_page: 20,
        page: this.page,
        category_id: order.actionId === null ? "" : order.actionId,
      };
      if (order.actionId === 0) {
        param.is_recommend = 1;
      }
      const { data } = await shopApiProductList(param);
      this.total = data.data.total;
      if (type === "next") {
        this.productList = this.productList.concat(data.data.data);
      } else {
        this.productList = data.data.data;
      }
      this.login = false;
    },
  },
};
</script>

<style lang="scss" scoped>
// @import "@/styles/shop.scss";
page {
  background: #f9f9f9;
}
.classify {
  width: 20%;
}
.classify-item {
  width: calc(80% - 40px);
  // margin: 0 auto;
  padding: 0 20px;
}

.scroll-view {
  width: 100%;
  height: calc(100vh - 260px);
}

.shopList {
  padding: 20px 0 40px 0;
  display: flex;
}
.empty {
  margin: 25vh auto;
}

.list2 {
  // width: 92%;
  background: #f9f9f9;

  padding: 15px 0%;
  height: 100%;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/Group47624.png");
  background-repeat: no-repeat;
  background-position: 50% -20%;
}

.back_to_top {
  position: fixed;
  bottom: 200rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background: #333;
  color: #fff;
  border: solid 1rpx #fff;
  line-height: 100rpx;
  text-align: center;
  border-radius: 10rpx;
  border: solid 1rpx #333;
}
</style>
